<template>
	<view class="tree-content orange-item">
		<view class="label-title" v-if="title">{{title}}</view>
		<view>
			<view class="label-content label-first-content" v-for="(v,i) in list" :key="i">
				<view class="flex-row">
					<view>
						<label style="" @click="handelParentChange(i)">
							<checkbox :checked="newList[i].check"></checkbox>
						</label>
					</view>
					<view @tap="changeShowChild(i)">
						<text style="margin-left: 20upx;">{{v.class_name}}</text>
						<text class="check-msg">（共</text>
						<text class="check-msg-stuNum">{{v.students.length}}</text>
						<text class="check-msg">人,已选择</text>
						<text class="check-msg-checkNum">{{newList[i].stuNum}}</text>
						<text class="check-msg">人）</text>
					</view>
				</view>
				<view class="flex-row">
					<view class="label-content" v-if="newList[i].showChild" v-for="(v1,i1) in v.students" :key="i1">
						<label @click="handelChange(i,i1)">
							<checkbox :checked="newList[i].students[i1].check"></checkbox>{{v1.stu_name}}
						</label>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				p1: 0,
				p2: -1,
				p3: -1,
				p4: -1,
				showLast: -1,
				showSecond: -1,
				showFirst: -1,
				checkObj: {
					parentIndex: [],
					childIndex: []
				},
				newList: []
			}
		},
		props: {
			list: Array,
			title: {
				type: String,
				default: '树状单选'
			}
		},
		created() {
			if (this.list.length > 0) {
				this.updateList()
			}
			this.$forceUpdate()
		},
		methods: {
			updateList() {
				this.list.forEach((val, index) => {
					let obj = {
						check: val.check ? true : false,
						index: index,
						showChild: false,
						students: [],
						stuNum: 0
					}
					val.students.forEach((v, i) => {
						if (v.check) {
							obj.stuNum += 1
						}
						obj.students[i] = {
							check: v.check ? true : false,
							index: i
						}
					})
					this.newList[index] = obj
				})
				this.informParent()
			},
			handelChange(parentIndex, index) {
				let checkParent = true,
					showChild = false
				this.newList[parentIndex].students[index].check = !this.newList[parentIndex].students[index].check
				this.newList[parentIndex].students.forEach(v => {
					if (v.check == false) {
						checkParent = false
					}
					if (v.check) {
						showChild = true
					}
				})
				this.newList[parentIndex].check = checkParent
				this.newList[parentIndex].showChild = showChild
				this.selStuNUmChange(parentIndex)
				this.$forceUpdate()
				this.informParent()
			},
			handelParentChange(index) {

				this.newList[index].check = !this.newList[index].check
				this.newList[index].students.forEach(v => {
					v.check = this.newList[index].check
				})
				this.newList.forEach(v => {
					v.showChild = false
				})
				if (this.newList[index].check) {
					this.newList[index].showChild = true
				} else {
					this.newList[index].showChild = false
				}
				this.selStuNUmChange(index)
				this.$forceUpdate()
				this.informParent()
			},
			selStuNUmChange(index) {
				let num = 0
				this.newList[index].students.forEach(stu => {
					if (stu.check) {
						num += 1
					}
				})
				this.newList[index].stuNum = num
			},
			changeShowChild(index) {
				this.newList.forEach((v, i) => {
					if (i != index) {
						v.showChild = false
					}
				})
				this.newList[index].showChild = !this.newList[index].showChild
				this.$forceUpdate()
			},
			informParent() {
				let requestData = []
				this.newList.forEach(val => {
					let obj = {
						parentIndex: val.index,
						check: val.check,
						students: []
					}
					val.students.forEach(v => {
						if (v.check) {
							obj.students.push(v.index)
						}
					})
					requestData.push(obj)
				})
				this.$emit('change', requestData)
			}
		},
		watch: {
			list() {

				this.updateList()
			}
		}
	}
</script>

<style>
	@import url("@/static/css/orange-juice.css");

	.tree-content {}

	.label-content {
		margin: 20upx 0 20upx 40upx;
	}

	.flex-row {
		display: flex;
		flex-wrap: wrap;
	}

	.label-first-content {
		margin-left: 0;
	}

	.check-msg {
		color: #999999;
	}

	.check-msg-stuNum {
		color: #f4517a;
	}

	.check-msg-checkNum {
		color: #f4517a;
	}
</style>
